<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审核采购订单</title>
    <script src="/js/vue/vue.js"></script>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/elementui/index.js"></script>
    <script src="/js/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--搜索栏 start-->
    <el-input v-model="orderId" placeholder="请输入订单编号" @input="searchPurchaseOrders"></el-input>
    <!--搜索栏 end-->

    <!--表格组件 start-->
    <el-table
            :data="orders"
            style="width: 100%">
        <el-table-column
                label="订单编号"
                prop="orderId">
        </el-table-column>
        <el-table-column
                label="供应商名称"
                prop="supplierCompany.companyName">
        </el-table-column>
        <el-table-column
                label="产品名称"
                prop="product.pname">
        </el-table-column>
        <el-table-column
                label="产品编号"
                prop="product.pnumber">
        </el-table-column>
        <el-table-column
                label="需求数量"
                prop="number">
        </el-table-column>
        <el-table-column
                label="申请人"
                prop="user.userName">
        </el-table-column>
        <el-table-column
                label="付款方式"
                prop="payType">
        </el-table-column>
        <el-table-column
                label="审核人"
                prop="review.user.userName">
        </el-table-column>
        <el-table-column
                label="状态"
                prop="review.reviewStatus">
        </el-table-column>
        <el-table-column
                label="操作"
                align="right">
            <template slot-scope="scope">
                <el-button
                        v-if="scope.row.review.reviewStatus == '待审核'"
                        type="primary"
                        @click="showReviewBox(scope.row)">审核
                </el-button>
                <span v-if="scope.row.review.reviewStatus == '已驳回'" style="display: inline-block;padding: 3px;background: crimson;color: whitesmoke">已驳回</span>
                <span v-if="scope.row.review.reviewStatus == '已审核'" style="display: inline-block;padding: 3px;background: #b3d8ff;color: whitesmoke">已审核</span>
            </template>
        </el-table-column>
    </el-table>
    <!--表格组件 end-->

    <!--分页组件 start-->
    <el-pagination
            background
            layout="prev, pager, next"
            :page-size="size"
            :current-page="current"
            :total="total"
            @current-change="loadPage">
    </el-pagination>
    <!--end-->

    <!--审核对话框 start-->
    <el-dialog title="审核" :visible.sync="reviewBoxVisible" width="80%" @close="clearForm">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="审核说明">
                <el-input type="textarea" v-model="form.reviewDescription"></el-input>
            </el-form-item>
        </el-form>
        <el-row>
            <el-button type="primary" @click="review(true)">审核</el-button>
            <el-button type="primary" @click="review(false)">驳回</el-button>
            <el-button @click="reviewBoxVisible = false">取消</el-button>
        </el-row>
    </el-dialog>
    <!--审核对话框 end-->
</div>

<script>

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                orders: null,
                reviewBoxVisible: false,
                orderId: '', // 搜索关键词
                current: 1, // 当前页
                size: 5, // 每页行数
                total: 0, // 数据总数
                form: {
                    orderNumber: '', // 订单编号
                    reviewDescription: '' // 审核说明
                } // 审核表单
            }
        },
        mounted() {
            // 初始加载商品数据
            this.loadPage(1);
        },
        methods: {
            /**
             * 加载当前页
             * @param current 页数
             */
            loadPage(current) {
                var params = {current};

                if (this.orderId != '') {
                    params.orderId = this.orderId;
                }

                axios.get('/PurchaseOrders', {params}).then(value => {
                    this.orders = value.data.data.records;
                    this.current = value.data.data.current;
                    this.size = value.data.data.size;
                    this.total = value.data.data.total;
                });
            },

            /**
             * 输入值变化触发，搜索采购订单
             */
            searchPurchaseOrders() {
                this.loadPage(1);
            },

            /**
             * 显示审核对话框
             */
            showReviewBox(row) {
               this.form.id = row.review.id;
               this.form.orderNumber = row.orderId;
                this.reviewBoxVisible = true;
            },

            /**
             * 审核
             * @param flag
             */
            review (flag) {

                if (flag) {
                    this.form.reviewStatus = "已审核";
                }else {
                    this.form.reviewStatus = "已驳回";
                }

                axios.put('/reviews',[this.form]).then(value => {
                    this.loadPage(1);
                    this.reviewBoxVisible = false;
                })
            },

            /**
             * 清除Form
             */
            clearForm() {
                for (let formKey in this.form) {
                    this.form[formKey] = '';
                }
            }
        }
    });
</script>
</body>
</html>